<template>
  <div class="myform">

    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      class="demo-ruleForm login-ruleForm"
    >
    <h3>仿网易电商管理系统</h3>
      <el-form-item prop="userName">
        <el-input
          type="text"
          v-model="ruleForm.userName"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item prop="checkPass">
        <el-input
          type="password"
          v-model="ruleForm.checkPass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width:100%" @click="loginFn"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {loginApi,getAdminInfo} from '@/request/api'
export default {
  data() {
    return {
      ruleForm: {
        userName: "",
        checkPass: "",
      },
      //验证规则
      rules: {
        userName:[{
          required:true,
          message:'账号不能为空!',
          trigger: "blur"
        }],
        checkPass:[{
          required:true,
          message:'密码不能为空!',
          trigger: "blur"
        }]
      },
      //   rules: {
      //     pass: [{ validator: validatePass, trigger: "blur" }],
      //     checkPass: [{ validator: validatePass2, trigger: "blur" }],
      //     age: [{ validator: checkAge, trigger: "blur" }],
      //   },
    };
  },
  created() {},
  mounted() {},
  methods: {
    loginFn() {
      this.$refs["ruleForm"].validate((vali) => {
        //这里是true 主要是判断这个用户命名规则是否正确
        // console.log(vali)
        if (vali) {
          //在这里请求后台接口数据
          loginApi({
            password: this.ruleForm.checkPass,
            username: this.ruleForm.userName,
          }).then((res) => {
            console.log(res)
            if (res.code === 200) {
              
              // 存储token（可以存储到vueX ,也可以存到localStorage）

              // this.$store.commit(SETTOKEN, res.data.tokenHead + res.data.token);
              //注意拦截器需要进到后台返回数据 res.data
              localStorage.setItem('token',res.data.tokenHead + res.data.token)
              // this.getUserInfo();

              //在这里登录成功后就获取用户信息（接口）--注意这里除了登录接口不需要在请求头上携带token,其他都要
              getAdminInfo().then((res)=>{
                console.log(res)
                if(res.code==200){
                  this.$router.push('/home')
                }
              })
            }
          })
        }
      })
    },
  },
};
</script>

<style scoped lang="less">
    .myform{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        background-color: #2d3a4b;
        h3{
            padding: 15px 0;
            color: #fff;
            font-size: 30px;
            text-align: center;
        }
        .login-ruleForm{
            width: 400px;
            height: 200px;
        }
    }
</style>
